<template>
	<view class="content" >
		  
			<u-navbar :is-back="true" back-text="个人主页" back-icon-color="#ffffff" title-color="#ffffff" :back-text-style="{color: '#ffffff'}" :background="{background: '#2979ff'}" :border-bottom="false">
				<view style="height: 10px;"></view>
				<view  class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
					<view class="slot-wrap-left"></view>
					<view class="slot-wrap-center mt10"></view>
					<view v-if="!isSelf" class="slot-wrap-right pr" style="color:#fff;">
						<view v-if="result.is_subscribe" @click="cancelFollow">
							<u-icon name="a-31guanzhu1-xuanzhong" color="#eee" custom-prefix="qxl-icon" size="44"></u-icon>
							<text class="pr" style="top:-3px">已关注</text>
						</view>
						<view v-else @click="follow">
							<u-icon name="a-31guanzhu1-xuanzhong" color="#eee" custom-prefix="qxl-icon" size="44"></u-icon>
							<text class="pr" style="top:-3px">未关注</text>
						</view>
					</view>
				</view>
			</u-navbar>

			<view v-if="show_main" class="main" >
				
				<view class="f32" style="padding: 10rpx 30rpx;background: #2979ff;height: 340rpx;text-align: center;color:#fff;">
					<view class="mt50">
						<view class="pr" style="display: inline-block;">
						  <image :src="result.head_pic" style="border-radius: 50%;width: 150rpx;height: 150rpx;"></image>
						  
						  <view v-if="result.sex == 1" class="pa" style="bottom:10rpx;right: -12rpx;background: #fff;border-radius: 50%;width:46rpx;height: 46rpx;">
							  <u-icon name="a-nan1" color="#06afe7" custom-prefix="qxl-icon" size="47"></u-icon>
						  </view>
						  <view v-else-if="result.sex == 2" class="pa" style="bottom:10rpx;right: -12rpx;background: #fff;border-radius: 50%;width:52rpx;height: 53rpx;">
						  		<u-icon name="nv1" color="#e443a6" custom-prefix="qxl-icon" size="50"></u-icon>
						  </view>
						  
					    </view>
					</view>
				    <view>{{result.nickname}}</view>
				</view>
				
				
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>年龄</text></view>
					<view class="disf pr col999" style="top:5rpx;">{{result.age ? result.age+'岁' : '暂无数据'}}</view>
				</view>
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>单位名称</text></view>
					<view class="disf pr col999" style="top:5rpx;">{{result.corporate_name ? result.corporate_name : '暂无数据'}}</view>
				</view>
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>职位</text></view>
					<view class="disf pr col999" style="top:5rpx;">{{result.job_name ? result.job_name : '暂无数据'}}</view>
				</view>
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>年收入</text></view>
					<view class="disf pr col999" style="top:5rpx;">{{result.annual_income ? result.annual_income : '暂无数据'}}</view>
				</view>
			</view>
			
		    <view v-if="!isSelf" class="mt30 bgf ph30 f32" style="text-align: center;">
				<view v-if="privateChat == 1" @click="sendMsage" class="p30 bbo">
					<u-icon name="faxiaoxi" color="#666666" custom-prefix="qxl-icon" size="40"></u-icon>与ta聊天
				</view>
				<view v-if="showLahei && !isBlack" @click="addToBlacklist" class="p30 bbo">
					<u-icon name="lahei" color="#666666" custom-prefix="qxl-icon" size="44"></u-icon>拉黑对方
				</view>
				<view v-else-if="showLahei && isBlack" @click="removeFromBlacklist" class="p30 bbo">
					<u-icon name="lahei" color="#666666" custom-prefix="qxl-icon" size="44"></u-icon>解除拉黑
				</view>
				
				<!--<view v-if="groupId" @click="showMuteTime=true" class="p30 bbo">
					<u-icon name="jinyan" color="#666666" custom-prefix="qxl-icon" size="44"></u-icon>群聊禁言
				</view>-->
				<view v-if="groupId" @click="deleteGroupMember" class="p30  bbo">
					<view style="display: inline-block;">
						<u-icon name="yichu1" color="#666666" custom-prefix="qxl-icon" style="position: relative;top:5rpx" size="54"></u-icon>
						<text>移出群聊</text>
					</view>
				</view>
				
				<view @click="report" class="p30">
					<u-icon name="jubao-mianxing" color="#666666" custom-prefix="qxl-icon" size="44"></u-icon>
					<text class="pr">举报对方</text>
				</view>
			</view>
		<loading :loading="not_load"/><!--加载状态-->
		
		<!--修改弹层-->
		<u-popup v-model="showMuteTime" mode="bottom" border-radius="30" height="380px" :closeable="true">
			<view style="margin-top: 10px;" class="p20">
				<view>禁言</view>
				<form @submit="setGroupMemberMuteTime">
					<view style="height: 50px;"></view>
					<radio-group name="time">
						<view class="disf f28" style="width: 100%;">
							<view class="mr30" style="width: 30%;">
								<label>
								   <radio value="600" style="transform:scale(0.7)" color="#2979ff"/>
								   <text>禁言10分钟</text>
								</label>
							</view>
							<view class="mr30" style="width: 30%;">
								<label>
								   <radio value="1800" style="transform:scale(0.7)" color="#2979ff"/>
								   <text>禁言30分钟</text>
								</label>
							</view>
							<view style="width: 30%;">
								<label>
								   <radio value="3600" style="transform:scale(0.7)" color="#2979ff"/>
								   <text>禁言1小时</text>
								</label>
							</view>
						</view>
						<view class="disf f28 mt30" style="width: 100%;">
							<view class="mr30" style="width: 30%;">
								<label>
									<radio value="7200" style="transform:scale(0.7)" color="#2979ff"/>
									<text>禁言2小时</text>
								</label>
							</view>
							<view class="mr30" style="width: 30%;">
								<label>
								   <radio value="86400" style="transform:scale(0.7)" color="#2979ff"/>
								   <text>禁言1天</text>
								</label>
							</view>
							<view style="width: 30%;">
								<label>
								    <radio value="259200" style="transform:scale(0.7)" color="#2979ff"/>
								    <text>禁言3天</text>
								</label>
							</view>
						</view>
						<view class="disf f28 mt30" style="width: 100%;">
							<view class="mr30" style="width: 30%;">
								<label>
								  <radio value="604800" style="transform:scale(0.7)" color="#2979ff"/>
								  <text>禁言1星期</text>
								</label>
							</view>
							<view class="mr30" style="width: 30%;">
								<label>
								   <radio value="2592000" style="transform:scale(0.7)" color="#2979ff"/>
								   <text>禁言1个月</text>
								</label>
							</view>
							<view style="width: 30%;">
								<label>
								   <radio value="15552000" style="transform:scale(0.7)" color="#2979ff"/>
								   <text>禁言3个月</text>
								</label>
							</view>
						</view>
					</radio-group >
					<view style="height: 100rpx;"></view>
					<view class="form-list">
						<button form-type="submit" class="my_button">提交</button>
					</view>
				</form>
			</view>
		</u-popup>
		
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(false);
const page_load=ref(false);
const not_load=ref(false);
const result=ref({});
const isSelf=ref(false); //是否本个查看
const privateChat=ref(1); // 是否可私聊:1可私聊,1不可私聊
const showLahei=ref(false); // 是否显示拉黑
const groupId=ref(''); // [腾讯IM]群聊时点过来的群ID,如果是群主点过来就有此值,其它用户从群点过来无此值
const isBlack=ref(false); // 主页用户是否在铁黑名单
const is_manage=ref(false); //管理员建群
//移出群聊
const deleteGroupMember=()=>{
	let userId=result.value.id;
	let list=[userId.toString()];
	uni.$utils.showModal('确认把该成员移出群聊',1,()=>{
		if(is_manage == 1) uni.$post('/appapi-config-entergroupnum2',{},{tencent_group_id:groupId.value,user_id:userId});
		uni.TIM.deleteGroupMember(groupId.value,list,'你违规了，被管理员移出群聊！',()=>{
			uni.$utils.showToast('移出群聊成功',0,()=>{
				uni.navigateBack({data:1});
			});
		},(imErr)=>{
			uni.$utils.showToast(imErr)
		});
	});
};
// 解除拉黑对方
const removeFromBlacklist=async()=>{
	let userId=result.value.id;
	let list=[userId.toString()];
	let ret=await uni.TIM.removeFromBlacklist(list);
	if(ret.code == 0){
		uni.$utils.showToast('解除对方黑名单成功');
		isBlack.value=false;
		return;
	}
	uni.$utils.showToast('解除对方黑名单失败');
};
// 拉黑对方
const addToBlacklist=()=>{
	uni.$utils.showModal('确认把对方加入黑名单？',1,()=>{
		let userId=result.value.id;
		let list=[userId.toString()];
		uni.TIM.addToBlacklist(list,(data)=>{
			uni.$utils.showToast('加入黑名单成功');
			isBlack.value=true;
		});
	});
};
//禁言
const showMuteTime=ref(false); //打开设置禁言
const setGroupMemberMuteTime=async(e)=>{
	if(!groupId.value) return;
	let time=e.detail.value.time;
	if(!time){
		uni.$utils.showToast('请选择禁言时间');
		return;
	}
	time=parseInt(time);
	let groupID=groupId.value;
	let userId=result.value.id;
	console.log(time,groupID,userId);
	uni.TIM.setGroupMemberMuteTime(groupID,userId,time,(data)=>{
		uni.$utils.showToast('禁言成功');
	});
};
//发信息
const sendMsage=async()=>{
	if(!not_load.value) return;
	let uri='';
	let conversationID = getConversationID();
	if(!conversationID){
		not_load.value=false;
		let str=uni.$appConfig['IM_PREFIX_MAKR']['da_zhao_hu']['rule']+'你好！';
		await uni.TIM.createTextMessage(0,result.value.id,str,(data)=>{
			setTimeout(()=>{
				conversationID = getConversationID();
				not_load.value=true;
				uri='/pages/chat-single/chat-single?conversationID='+conversationID+'&nick='+result.value.nickname+'&to='+result.value.id;
				//console.log(uri);
				uni.$utils.goPage(uri,1);
			},200);
		});
	}else{
		uri='/pages/chat-single/chat-single?conversationID='+conversationID+'&nick='+result.value.nickname+'&to='+result.value.id;
		uni.$utils.goPage(uri,1);
	}
};
//获取当前用户的会话ID
const getConversationID=()=>{
	let list=uni.$vuex.state.globalData.conversationList;
	for(let i in list){
		if(list[i].type != 'C2C') continue;
		if(list[i].userProfile.userID == result.value.id){
			return list[i].conversationID;
		}
	}
	return '';
};
//举报群
const report=()=>{
	let uri="/pages/member-report/member-report?id="+result.value.id+'&type=0';
	let profile=encodeURIComponent(result.value.head_pic);
	let name=encodeURIComponent(result.value.nickname);
	uri+='&profile='+profile+'&name='+name;
	uni.$utils.goPage(uri);
};
//关注
const follow=async(e)=>{
	let param={followed_id:result.value.id};
	not_load.value=false;
	let ret=await uni.$get('/appapi-subscribe-setsub',param);
	not_load.value=true;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	uni.$utils.showToast(ret.info);
	result.value.is_subscribe=1;
};
//取消关注
const cancelFollow=async(e)=>{
	let param={followed_id:result.value.id};
	not_load.value=false;
	let ret=await uni.$get('/appapi-subscribe-cancel',param);
	not_load.value=true;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	uni.$utils.showToast(ret.info);
	result.value.is_subscribe=0;
};
//页面加载时
onLoad(async (options)=>{
	is_manage.value=options.is_manage;
	//console.log('is_manage',is_manage.value);
	//console.log(options);
	// privateChat 参数:0不可私聊,1可私聊
	if(options.privateChat == 0 || options.privateChat == 1) {
		privateChat.value=options.privateChat;
	}
	//群主进入才有此值
	groupId.value=options.tencent_group_id || '';
	//获取我的黑名单列表
	let black=await uni.TIM.getBlacklist();
	if(black.code == 0){
		for(let i = 0; i < black.data.length;i++){
			if(options.user_id == black.data[i]){ // 对方在我的黑名单里
				isBlack.value=true;
				break;
			}
		}
	}
    loadPage(options,false);
});
//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-config-userhome',options);
	if(ret.error_code != 0){
		show_main.value=true;
		not_load.value=true;
		uni.$utils.showToast(ret.info,0,()=>{
			uni.navigateBack({data:1});
		});
		return;
	}
	//console.log(ret.data);
	show_main.value=true;
	not_load.value=true;
	result.value=ret.data;
	//本人查看资料
	if(result.value.id == uni.$vuex.state.globalData.user.user_id){
		isSelf.value=true;
	}
	if(getConversationID()) showLahei.value=true;
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	topDropDownShow.value=false;
	uni.$utils.dataSetPage(event);
};
</script>

<style  lang="scss">
	page {
		
	}
.fnow{color:#2979ff;}
.my_button{
	color:#fff;
	font-weight: normal;
	font-size: 32rpx;
	border:none;
	background: blue;
	background: #2979ff;
}
</style>
